<template>
    <div>
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
          v-for="(item,index) in breadList"
          :key="index"
          :to="{ path: item.path }"
        >{{item.meta.title}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="container">
        <div>
          <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" status-icon>
            <el-form-item label="景点名" prop="attraction_name">
              <el-input v-model="ruleForm.attraction_name" />
            </el-form-item>
            <el-form-item label="景点地址" prop="attraction_address">
              <el-input v-model="ruleForm.attraction_address" type="" />
            </el-form-item>
            <!-- <el-form-item label="景点图片" prop="attraction_img">
              <el-input v-model="ruleForm.attractionImg" type="file"/>
            </el-form-item> -->
            <el-form-item label="景点描述" prop="attraction_desc">
              <el-input v-model="ruleForm.attraction_desc" />
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-button type="primary" @click="submitForm(ruleFormRef)">新增</el-button>
            <el-button @click="resetForm(ruleFormRef)">重置表单</el-button>
        </div>
      </div>
    </div>
  </template>
  <script>
  import { useRouter, useRoute } from 'vue-router'
  import { ref, reactive, watch } from "vue";
  import request from "../../utils/request";
  import { ElNotification } from "element-plus";
  export default {
    setup() {
      let breadList = [] // 路由集合
      const route = useRoute()
      const getBreadcrumb=(url)=> {
        let matched = url.matched;
        //如果不是首页
        if ("Home"==matched[0].name) {
          matched[0].meta =  { title: "系统首页" } 
        }
        breadList = matched;
      }
      watch(route, (newValue, oldValue) => {
        // console.log(222222,newValue)
        getBreadcrumb(newValue)
      },{ deep: true, immediate: true });
      
      const resetForm = (formEl) => {
        if (!formEl) return;
        formEl.resetFields();
      };
      const submitForm = async (formEl) => {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            // console.log("提交更新", fields);
            request
              .request({
                url: "/attraction/add",
                method: "post",
                data: {
                    attraction_id: ruleForm.attraction_id,
                    attraction_name: ruleForm.attraction_name,
                    attraction_address: ruleForm.attraction_address,
                    attraction_img: ruleForm.attraction_img,
                    attraction_desc: ruleForm.attraction_desc,
                },
              })
              .then((res) => {
                if (res.data.code == 200) {
                  ElNotification({
                    title: "更新成功",
                    message: "成功更新用户信息",
                  });
                } else {
                  ElNotification({
                    title: "更新失败",
                    message: "请联系管理员检查失败原因",
                  });
                }
              })
              .catch((e) => {
                ElNotification({
                  title: "更新失败",
                  message: "请联系管理员检查失败原因",
                });
              });
          } else {
            ElNotification({
              title: "校验失败",
              message: "请重新填写信息",
            });
          }
        });
      };
      const ruleForm = reactive({
            attraction_id: '',
            attraction_name: '',
            attraction_address:'',
            attraction_img: '',
            attraction_desc: '',
      });
      const rules = reactive({
        attraction_name: [
          {
            required: true,
            message: "请输入景点",
            trigger: "blur",
          },
        ],
        attraction_address: [
          {
            required: true,
            message: "请输入景点地址",
            trigger: "blur",
          },
          
        ],
        attraction_img: [
          {
            required: false,
            message: "请输入景点图片",
            trigger: "blur",
          },
        ],
        attraction_desc: [
          {
            required: true,
            message: "请输入景点描述",
            trigger: "false",
          },
        ],
        
      });
      const ruleFormRef = ref();
      const centerDialogVisible = ref(false);
      return {
        breadList,
        resetForm,
        ruleFormRef,
        submitForm,
        ruleForm,
        rules,
        centerDialogVisible,
        
      };
    },
  };
  </script>
  <style lang="scss" scoped>
  .handle-box {
    margin-bottom: 20px;
  }
  
  .handle-select {
    width: 120px;
  }
  
  .handle-input {
    width: 300px;
    display: inline-block;
  }
  
  .table {
    width: 100%;
    font-size: 14px;
  }
  
  .red {
    color: #ff0000;
  }
  
  .mr10 {
    margin-right: 10px;
  }
  
  .table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
  }
  </style>
  